<template>
	<view>
		<!-- 分段器 NAV -->
		<!-- <view class="h40" :style="{color:color}" @click="tonav">
			
			
			<slot></slot>
		</view> -->
		<view class="nav">
			<slot name="navleft"></slot>
			<view class="flex1">
				<view class="item" v-for="(item,index) in navlist" 
				:key="index" 
				@click="toNav" 
				:current="current"  
				:data-index="index" 
				>
					<view class="title" :class="current==index?'fontweiht':''" :style="current==index?[{color:currentcolor}]:''">
						{{item.title}}
					</view>
					<view class="current" :style="current==index?[{'background':currentcolor}]:''"></view>
														<!-- [{newheader:navBarFixed},{changebf:huifu}] -->
					<!-- <view class="current" :style="{background:currentcolor}"></view> -->
				</view>
			</view>
			<slot name="navright"></slot>
		</view>
		
		<!--  -->
	</view>
</template>

<script>
	export default {
		name:"FatFatMeng-nav",
		props: {
			// 当前选中的颜色
			currentcolor: {
				type: String,
				default: '#000'
			},
			navlist: {
				type: Array,
				default:''
			},
			current: {
				// 当前样式
				default: 0
			}
		},
		data() {
			return {
				//Navindex:0,
			};
		},
		methods: {
			// 点击nav控制下的swiper展示
			toNav(e) {
				console.log("Nav组件")
				let index = e.currentTarget.dataset.index
				console.log('Nav当前位置：' + index);//当前位置
				this.$emit("changeNav",e.currentTarget.dataset.index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.h40 {
		height: 80rpx;
		line-height: 80rpx;
		background: #1CBBB4;
	}
	
	.nav {
		display: flex;
		justify-content: center;
		align-items: center;
		view {
			display: flex;
		}
		.flex1 {
			flex: 1;
			height: 90rpx;
			line-height: 90rpx;
			align-items: center;
			justify-content: center;
			.item {
				flex-direction: column-reverse;
				height: 90rpx;
				line-height: 90rpx;
				//width: 80rpx;
				padding: 0 10rpx;
				align-items: center;
				.title {
					font-size: 32rpx;
					//color: $hzz;//颜色不设置 外面组件加个css写属性就可以了
					//width: 80rpx;
					padding: 0 10rpx;
					justify-content: center;
					//align-items: center;
					position: relative;
					/* #ifdef APP-PLUS */
					font-size: 38rpx;
					/* #endif */
				}
				.fontweiht {
					font-weight: 600;
				}
				.current {
					position: absolute;
					height: 8rpx;
					width: 44rpx;
					border-radius: 4rpx;
					//background: $hzz;//颜色不设置 外面组件加个css写属性就可以了
					//justify-content: center;
					/* #ifdef APP-PLUS */
					// height: 8rpx;
					// width: 36rpx;
					/* #endif */
				}
			}
		}
		
		
	}

</style>
